<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>路由应用测试</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/vue-router.min.js"></script>
        <script src="../js/jquery-3.2.1.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="app">
            <p>标签式的导航菜单</p>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li>
                    <router-link to="/SVN">SVN</router-link>
                </li>
                <li>
                    <router-link to="/Java">Java</router-link>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                'aaa': '你好'
            },
            router: new VueRouter({
                routes: [{
                    path: "/Java",
                    component: {
                        template: "<div>Java</div>"
                    }
                }, {
                    path: "/SVN",
                    component: {
                        template: "<div>SVN</div>"
                    }
                }]
            })
        });
    </script>
</html>
